<template xmlns="http://www.w3.org/1999/html">
  <div id="main">
    <div class="header">
      <a-row type="flex">
        <a-col :span="24" :style="{height:'42px'}">
        </a-col>
      </a-row>
      <a-row type="flex">
        <a-col :span="12" :style="{height:'40px'}">

          <router-link to="/" >
            <span :style="{position:'absolute',left:'90px' ,fontSize:'20px',fontWeight:'bold',}">首页 </span>
          </router-link>


        </a-col>
        <a-col :span="12" :style="{height:'40px'}">
          <span :style="{position:'absolute',right:'50px' ,fontSize:'20px'}">数据截止 : {{ nowTime }}</span>

        </a-col>
      </a-row>
      <a-row type="flex">
        <a-col :span="24" :style="{height:'20px'}">
        </a-col>
      </a-row>
    </div>

    <div class="center">
      <a-row type="flex" :style="{height:'515px'}">
        <a-col :span="1" >
          <div id="leftlabel">
            <a class="a-leftButten"  :style="{writingMode:'vertical-lr',height:'510px',
                                              textAlign: 'center',lineHeight:'62px',
                                              fontSize:'130%'}">
              <router-link to="/Other">
                <span>生产场 <img class="leftButten" src="../assets/leftArrow.png" > 景再现</span>
              </router-link>
            </a>
          </div>
        </a-col>
        <a-col :span="22" >
          <router-view></router-view>
        </a-col>
        <a-col :span="1">
          <div id="leftlabel2">
            <a class="a-rightButten" :style="{writingMode:'vertical-lr',height:'510px',
                                              textAlign: 'center',lineHeight:'62px',
                                              fontSize:'130%'}">
              <router-link to="/Other">
                <span>经济运 <img class="rightButten" src="../assets/rightArrow1.png"/> 行分析</span>
              </router-link>
            </a>
          </div>
        </a-col>
      </a-row>

      <a-row type="flex">
        <a-col :span="24" :style="{height:'9px'}"></a-col>
      </a-row>
    </div>

    <div class="tail">
      <a-row type="flex">
        <a-col :span="24" :style="{height:'9px'}"></a-col>
      </a-row>

      <a-row justify="center" type="flex" >
        <a-col >

          <router-link  to="/Other">
            <button>
              整体 <br> 情况
            </button>
          </router-link>


          <router-link  to="/Other">
            <button>
              财务<br>税利
            </button>
          </router-link>


          <router-link  to="/Other">
            <button>
              烟叶<br>生产
            </button>
          </router-link>


          <router-link  to="/Other">
            <button>
              卷烟<br>产销
            </button>

          </router-link>

          <router-link  to="/Layout">
            <button>
              卷烟<br>库存
            </button></router-link>


          <router-link  to="/Other">
            <button>
              卷烟<br>结构
            </button>
          </router-link>


          <router-link  to="/Other">
            <button>
              卷烟细<br>分价位
          </button>
          </router-link>
          <router-link  to="/Other">
            <button>
              重点<br>品牌
            </button>
          </router-link>
          <router-link  to="/Other">
            <button>
              细支<br>卷烟
            </button>

          </router-link>

          <router-link  to="/Other">
            <button>
              合作<br>生产
            </button>
          </router-link>
          <router-link  to="/Other">
            <button>
              企业<br>对标
            </button>
          </router-link>

        </a-col>
      </a-row>
    </div>
  </div>

</template>

<script>
export default {
  name: "Home",
  setup(){
    const time = new Date();
    var year = time.getFullYear();
    var month = time.getMonth() + 1;
    var day = time.getDate();
    if (month < 10){ month = "0" + month; }
    if (day < 10){ day = "0" + day; }
    var nowTime = year + "年" + month + "月" + day + "日";
    return{nowTime}
  }
}
</script>

<style scoped>
#main{
  position: relative;
  width: 100%;
  height: 722px;
  background-image: url('../assets/backimage.png');
  background-size: 100% 100%;
}
button{
  background: url("../assets/noSelectedButton.png") no-repeat;
  width: 104px;
  height: 49px;
  border: none;
  font-size: 16px;
}

.a-rightButten:hover .rightButten {
  background-image: url("../assets/rightArrow.png");
}
.a-leftButten:hover .leftButten {
  background-image: url("../assets/leftArrow1.png");
}

</style>
